<template>
<view class="square-main tab-view">
	<status-navigator-wrap>
		<view class="page-title">广场</view>
	</status-navigator-wrap>
	
	<view class="tab-list">
		<view :class="['tab-item', {'curr-tab-item': index == tab.curr}]" v-for="(item, index) in tab.list"
		@click="tab.curr = index">
			<view class="label-wrap">
				<view class="label">{{ item }}</view>
			</view>
		</view>
	</view>
	
	<view class="recommend-tab-list" v-if="tab.curr == 1">
		<view :class="['tab-item', {'curr-tab-item': index == recommendTab.curr}]"
		v-for="(item, index) in recommendTab.list"
		@click="recommendTab.curr = index">
			{{ item.text }}
		</view>
		<view class="placeholder" v-for="i in (4 - (recommendTab.list.length % 4))"></view>
	</view>
	
	<view class="list-container">
		<view class="article-list">
			<view class="article-item" v-for="(item, index) in 3">
				<view class="user-info" @click="$router.to('person_info')">
					<image class="head-picture" src="@/static/images/a.jpg"></image>
					<view class="info">
						<view>李嘉伦</view>
						<view>武汉协和医院 执业兽医</view>
					</view>
					<view class="follow-btn btn">
						<image src="@/static/images/icon/add.png"></image>
						<view>关注</view>
					</view>
				</view>
				<view class="title">关于狗狗拉稀，你需要知道的是这些</view>
				<view class="content">
					可能是由多种原因引起的，包括寄生虫感染、病毒性肠炎、食物中毒、消化不良等。以下是一些应对方法，但请注意，如果症状持续或就医…
					<text class="show-all-btn" @click="$router.to('article_detail')">全文</text>
				</view>
				<view class="content-images">
					<image src="@/static/images/a.jpg" v-for="item in 3" mode="aspectFill"></image>
				</view>
				<view class="date-time">发布于2024-09-08 12:02:4</view>
				<view class="tag-list">
					<view class="tag-item" @click="$router.to('tag_article')">#狗狗拉稀</view>
				</view>
				<view class="bottom-btns">
					<view class="btn">
						<view>
							<image src="@/static/images/icon/star.png"></image>
							<text>17</text>
						</view>
					</view>
					<view class="btn">
						<view>
							<image src="@/static/images/icon/like.png" v-if="index == 0"></image>
							<image src="@/static/images/icon/like-acitve.png" v-else></image>
							<text>17</text>
						</view>
					</view>
					<view class="btn">
						<view>
							<image src="@/static/images/icon/share.png"></image>
							<text>17</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import statusNavigatorWrap from '@/components/status-navigator-wrap.vue'
export default {
	data() {
		return {
			tab: {
				curr: 0,
				list: ["关注", "推荐"]
			},
			recommendTab: {
				curr: 0,
				list: [
					{ text: "猫咪" },
					{ text: "狗狗" },
					{ text: "兔兔" },
					{ text: "仓鼠" },
					{ text: "猫砂" },
					{ text: "磨牙" },
					{ text: "饮食" }
				]
			}
		}
	},
	computed: {
		
	},
	methods: {
			
	},
	components: {
		statusNavigatorWrap
	}
}
</script>

<style lang="less">
.square-main {
	display: flex;
	flex-direction: column;
	padding: 0px 40rpx 0rpx;
	
	.page-title {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		color: #0B1526;
		font-size: 36rpx;
	}
	
	.tab-list {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		
		.tab-item {
			height: 100%;
			padding: 0 96rpx;
			
			.label-wrap {
				height: 100%;
				border-bottom: 4rpx #FFFFFF solid;
				transition: .2s;
				
				.label {
					display: flex;
					align-items: center;
					height: 100%;
					font-size: 32rpx;
					font-weight: 350;
					color: #6E6E6E;
					transition: .2s;
				}
			}
		}
		
		.curr-tab-item {
			.label-wrap {
				border-color: #FF6D03;
				
				
				.label {
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
	
	.recommend-tab-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40rpx;
		
		.tab-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 152rpx;
			height: 64rpx;
			border-radius: 168rpx;
			background: #FFFFFF;
			border: 1rpx solid #D9D9D9;
			line-height: 1;
			color: #0B1526;
			font-size: 30rpx;
			transition: .1s;
			
			&:nth-child(n+5) {
				margin-top: 24rpx;
			}
		}
		
		.curr-tab-item {
			background: #FFEDE0;
			color: #FF6D03;
			border-color: #FFEDE0;
		}
		
		.placeholder {
			width: 152rpx;
		}
	}
	
	.list-container {
		flex: 1;
		height: 0;
		overflow-y: auto;
		margin-top: 30rpx;
		
		.article-list {
			.article-item {
				margin-top: 40rpx;
				
				.user-info {
					display: flex;
					align-items: center;
					height: 80rpx;
					
					.head-picture {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
					}
					
					.info {
						flex: 1;
						margin-left: 20rpx;
						
						>view {
							color: #000000;
							
							&:nth-child(1) {
								font-size: 30rpx;
								opacity: 0.8;
							}
							
							&:nth-child(2) {
								font-size: 24rpx;
								opacity: 0.3;
							}
						}
					}
					
					.follow-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 144rpx;
						height: 60rpx;
						border-radius: 30rpx;
						
						background: #FF6D03;
						
						>image {
							width: 22rpx;
							height: 22rpx;
						}
						
						>view {
							margin-left: 8rpx;
							color: #FFFFFF;
							font-size: 26rpx;
							line-height: 1;
						}
					}
				}
				
				.title {
					margin-top: 30rpx;
					font-size: 32rpx;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 0.8);
				}
				
				.content {
					margin-top: 28rpx;
					font-size: 30rpx;
					font-weight: 500;
					line-height: 48rpx;
					color: rgba(0, 0, 0, 0.5);
					
					.show-all-btn {
						color: #FF6D03;
					}
				}
				
				.content-images {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 30rpx;
					
					&::after {
						content: "";
						width: 212rpx;
					}
					
					>image {
						flex-shrink: 0;
						width: 212rpx;
						height: 212rpx;
						border-radius: 32rpx;
					}
				}
				
				.date-time {
					color: #B4B4B4;
					font-size: 24rpx;
					margin-top: 30rpx;
					padding: 5rpx 0;
				}
				
				.tag-list {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					
					.tag-item {
						display: flex;
						align-items: center;
						line-height: 1;
						flex-shrink: 0;
						margin-right: 20rpx;
						height: 48rpx;
						border-radius: 168rpx;
						padding: 0 24rpx;
						background: #E2F0FF;
						font-size: 24rpx;
						color: #0B1526;
					}
				}
				
				.bottom-btns {
					display: flex;
					margin-top: 30rpx;
					padding-top: 30rpx;
					border-top: 1rpx solid #F7F7F7;
					
					.btn {
						display: flex;
						align-items: center;
						padding-left: 80rpx;
						flex: 1;
						
						view {
							display: flex;
							align-items: center;
							
							>image {
								width: 30rpx;
								height: 30rpx;
							}
							
							>text {
								margin-left: 10rpx;
								font-size: 24rpx;
								line-height: 1;
								color: rgba(0, 0, 0, 0.5);
							}
						}
					}
				}
			}
		}
	}
}
</style>
